<script setup lang="ts">
import { onMounted, ref } from "vue"
import {getOrderByStatus} from "../api/myorder.js"

const myorderList = ref([])
const activeTab = ref("valid") //激活tab
const totalPages = ref()
const total = ref()
const currentPage = ref()
const currentStatus = ref()

const status = 0
onMounted(()=>{
    getByStatus()
})
//0未支付，1已支付
function changeStatus(status){
    currentStatus.value = status
    getByStatus()
}
//查询全部，将currentPage，currentStatus改为空值
function changeAll(){
     currentPage.value = ''
     currentStatus.value = ''
    getByStatus()
}

async function getByStatus() {
    const requestParams =  {
        pageNUmber:currentPage.value,
        orderStatus:currentStatus.value
}
    const response = await getOrderByStatus(requestParams)
    console.log(response)
    console.log( "几条数据",response.data.data.total)

    myorderList.value = response.data.data.records
    console.log("--------------------")
    console.log(myorderList.value)
    totalPages.value =  response.data.data.pages
    total.value = response.data.data.total
    currentPage.value = response.data.data.current
}

//下一页
function increse(){
    if(currentPage.value< totalPages.value)
        currentPage.value++
    getByStatus()
}
//上一页
function decrese(){
    if(currentPage.value>0 )
        currentPage.value--
    getByStatus()
}
</script>

<template>
    <div>
        <h2>我的订单</h2>
        <div>
            <button @click="changeAll()">全部</button>
            <button @click="changeStatus(0)">未支付</button>
            <button @click="changeStatus(1)">已支付</button>
        </div>
        <div v-for="order in myorderList" :key="order.orderId" class="order-card">
        <!-- 订单信息 -->
        <div class="order-info">
            <span>原价: ￥{{ order.productPrice }}</span>
            <span>商品: {{ order.productName }}</span>
            <span>订单价格: ￥{{ order.orderPrice }}</span>
            <span>订单编号: {{ order.orderNumber }}</span>
            <span>下单时间: {{ order.orderCreateTime }}</span>
            <span>收件人: {{ order.receiveUsername }}</span>
            <span>手机号: {{ order.receiveUserTelno }}</span>
            <span>收件地址: {{ order.addressInfo }}</span>
        </div>

        <!-- 状态 -->
        <span 
            class="order-status"
            :class="order.orderStatus == 0 ? 'unpaid' : 'paid'">
            {{ order.orderStatus == 0 ? '未支付' : '已支付' }}
        </span>

        <!-- 支付信息 -->
        <div class="pay-info" v-if="order.orderStatus == 1">
            <div>使用优惠券: {{ order.couponName }}</div>
            <div>优惠金额: ￥{{ order.couponPrice }}</div>
            <div>流水编号: {{ order.flowNUm }}</div>
            <div>实际支付金额: ￥{{ order.paidPrice }}</div>
            <div>支付时间: {{ order.paidTime }}</div>
        </div>
        </div>
       
        <button @click="decrese() " v-if="currentPage !=1 ">上一页</button>
        {{ currentPage }}
        <button @click="increse() " v-if="currentPage!=totalPages">下一页</button>
    </div>
</template>

<style scoped>
/* 整体页面 */
div {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  color: #333;
}

/* 页面标题 */
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #222;
}

/* tab 按钮区域 */
button {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 16px;
  margin-right: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  background-color: #e9e9e9;
}

button:active {
  background-color: #ddd;
}

/* 订单卡片 */
.order-card {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.order-card:hover {
  transform: translateY(-2px);
}

/* 订单基本信息 */
.order-info {
  margin-bottom: 10px;
  line-height: 1.8;
}

.order-info span {
  display: inline-block;
  margin-right: 12px;
}

/* 状态标签 */
.order-status {
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 14px;
}

.order-status.unpaid {
  color: #ff4d4f;
  background-color: #fff1f0;
  border: 1px solid #ffa39e;
}

.order-status.paid {
  color: #52c41a;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

/* 支付信息 */
.pay-info {
  border-top: 1px dashed #ddd;
  padding-top: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
</style>
